<template>
	<view>
		<view class="Index">
				<!-- 瀑布流布局列表 -->
				<view class="pubuBox">
					<view class="pubuItem">
						<view class="item-masonry" v-for="(item, index) in LiveComList" @click="gotodetail(item.data.id)" :key="index">
							<image v-if="item.data.cover!=null" :src="item.data.cover"></image>
							<image v-else src="/static/zwpic.png"></image>
							<view class="listtitle"> <!-- 这是没有高度的父盒子（下半部分） -->
								<view class="listtitle1">{{ item.data.name }}</view>
								<view class="listtitle2">
									{{ item.data.author }}
								</view>
								<view class="listtitle3" style="float: right;margin-right: 10rpx;">
									<span><img width="20rpx" src="/static/like_start.jpg"/></span>{{item.data.praise}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		getLiveCreation,
	} from '@/api/userInfo';
	export default {
		data() {
			return {
				showCategoryIndex: 0,
				LiveComList: [], //作品列表
			};
		},
		async onShow() {
			// 初始化数据
			await this.initData();
		},
		methods:{
		  async initData(){
				const response=(await getLiveCreation("zhangsan")).data
				console.log(response.data)
				this.LiveComList=response.data.praises
			},
			gotodetail(index){
				uni.navigateTo({
					url:'/pages/zpdetail/zpdetail?id='+index
				});
			}
	}
}
</script>

<style lang="scss">
	.pubuBox {
			padding: 22rpx;
		}
	
		.pubuItem {
			column-count: 2;
			column-gap: 20rpx;
		}
	
		.item-masonry {
			box-sizing: border-box;
			border-radius: 15rpx;
			overflow: hidden;
			background-color: #fff;
			break-inside: avoid;
			/*避免在元素内部插入分页符*/
			box-sizing: border-box;
			margin-bottom: 20rpx;
			box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
		}
	
		.item-masonry image {
			width: 100%;
		}
	
		.listtitle {
			padding-left: 22rpx;
			font-size: 24rpx;
			padding-bottom: 22rpx;
	
			.listtitle1 {
				line-height: 39rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				min-height: 39rpx;
				max-height: 78rpx;
			}
	
			.listtitle2 {
				color: #ff0000;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
				padding-top: 22rpx;
	
				.listtitle2son {
					font-size: 32rpx;
				}
			}
	
			.listtitle3 {
				font-size: 28rpx;
				color: #909399;
				line-height: 32rpx;
				padding-top: 22rpx;
			}
		}
	
		.Index {
			width: 100%;
			height: 100%;
		}
		
</style>